<html>
<head>
<link rel="stylesheet" href="../../js/sh/SyntaxHighlighter.css" type="text/css" />
<script src="../../js/sh/shCore.js"></script>
<script src="../../js/sh/shBrushJava.js"></script>
<style>

* {
font-family:Courier New,monospace;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  font-size: 11px;
}

.dp-highlighter {
  white-space: nowrap;
  overflow: visible;
  width: 710px;
  font-size: 11px;
  font-family:Courier New,monospace;
}
</style>
</head>
<body>
<textarea name="code" class="java:nogutter:nocontrols" rows="15" cols="120">
/*
 * GWT-Ext Widget Library
 * Copyright 2007 - 2008, GWT-Ext LLC., and individual contributors as indicated
 * by the @authors tag. See the copyright.txt in the distribution for a
 * full listing of individual contributors.
 *
 * This is free software; you can redistribute it and/or modify it
 * under the terms of the GNU Lesser General Public License as
 * published by the Free Software Foundation; either version 3 of
 * the License, or (at your option) any later version.
 *
 * This software is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 * Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public
 * License along with this software; if not, write to the Free
 * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
 * 02110-1301 USA, or see the FSF site: http://www.fsf.org.
 */
 

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootPanel;
import com.gwtext.client.data.*;
import com.gwtext.client.util.Format;
import com.gwtext.client.widgets.Panel;
import com.gwtext.client.widgets.form.ComboBox;
import com.gwtext.client.widgets.form.FormPanel;
import com.gwtext.client.widgets.form.event.ComboBoxListenerAdapter;

public class LiveSearchSample implements EntryPoint {

    public void onModuleLoad() {
        Panel panel = new Panel();
        panel.setBorder(false);
        panel.setPaddings(15);

        //Use a ScriptTagProxy because you are getting data from a different domain using
        //a Json web service. If getting data from your own domain, then should use HttpProxy
        DataProxy dataProxy = new ScriptTagProxy("http://extjs.com/forum/topics-remote.php");

        RecordDef recordDef = new RecordDef(new FieldDef[]{
                new StringFieldDef("title", "topic_title"),
                new StringFieldDef("topicId", "topic_id"),
                new StringFieldDef("author", "author"),
                new DateFieldDef("lastPost", "post_time", "timestamp"),
                new StringFieldDef("excerpt", "post_text")
        });

        JsonReader reader = new JsonReader(recordDef);
        reader.setRoot("topics");
        reader.setTotalProperty("totalCount");
        reader.setId("post_id");

        final Store store = new Store(dataProxy, reader);
        store.load();

        final String resultTpl = "<div class=\"search-item\"><h3><span>{lastPost:date(\"M j, Y\")}"
                                +  "<br/>by {author}</span>{title}</h3>{excerpt}</div>";

        ComboBox cb = new ComboBox();
        cb.setStore(store);
        cb.setDisplayField("title");
        cb.setTypeAhead(false);
        cb.setLoadingText("Searching...");
        cb.setWidth(440);
        cb.setPageSize(10);
        cb.setHideTrigger(true);
        cb.setTpl(resultTpl);
        cb.setMode(ComboBox.REMOTE);
        cb.setTitle("ExtJS Forums");
        cb.setHideLabel(true);
        cb.setItemSelector("div.search-item");

        cb.addListener(new ComboBoxListenerAdapter() {
            public void onSelect(ComboBox comboBox, Record record, int index) {
                String[] args = new String[]{record.getAsString("topicId"), record.getId()};
                String url = Format.format("http://extjs.com/forum/showthread.php?t={0}&p={1}",
                                            args);
                Window.open(url, "forum", "");
            }
        });

        Panel searchPanel = new Panel();
        searchPanel.setWidth(490);
        searchPanel.setHeight(150);
        searchPanel.setPaddings(20);
        searchPanel.setTitle("Search ExtJS Forums");
        searchPanel.setFrame(true);

        FormPanel form = new FormPanel();
        form.setBorder(false);
        form.add(cb);
        searchPanel.add(form);

        Panel instructionPanel = new Panel();
        instructionPanel.setBorder(false);
        instructionPanel.setPaddings(4, 0, 0, 0);
        instructionPanel.setHtml("Live search requires a minimum of 4 characters.");
        searchPanel.add(instructionPanel);
        panel.add(searchPanel);

        RootPanel.get().add(panel);
    }
}
</textarea>
<script class="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>
